<script lang="ts" setup>
// #region 引入包, 函数和组件
import { ref } from 'vue'
import { getFoods } from '@/api' // 获取食物数据接口
import { useFoodStore } from '@/stores/counter' // 食物仓库
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const foodStore = useFoodStore()
// console.log(foodStore)
// #endregion

// #region // 变量
const curTabIndex = ref(0) // 当前的选中的tab的下标
// #endregion

// #region // 函数
const getFoodsList = async () => {
  try {
    // 如果已经拿到过数据, 不再调用
    if (foodStore.foodList.length) return
    const res = await getFoods()
    // console.log(res)
    // 返回成功后赋值
    if (res.data.code === 0) {
      foodStore.setFoodList(res.data.data)
    }
  } catch (error) {
    console.log(error)
  }
}
// #endregion

// #region // 生命周期和vue函数
getFoodsList() // 进页面调接口
// #endregion
</script>

<template>
  <div class="home">
    <h3>食物健康测评</h3>
    <head-controls></head-controls>
    <div class="search">
      <input type="text" placeholder="搜索今天你吃的食物" />
      <i>&telrec;</i>
    </div>
    <div class="con">
      <aside>
        <span
          v-for="(tab, index) in foodStore.foodList"
          :key="tab.name"
          :class="{ active: curTabIndex === index }"
          @click="curTabIndex = index"
        >
          {{ tab.name }}
        </span>
      </aside>
      <transition-group v-if="foodStore.foodList.length" tag="article" name="item" mode="out-in">
        <div
          :class="['item', { active: item.checked }]"
          v-for="item in foodStore.foodList[curTabIndex].list"
          :key="item.name"
          @click="foodStore.setSelectList(item)"
        >
          <img :src="item.imgUrl" :title="item.name" />
          <span>{{ item.name }}</span>
        </div>
      </transition-group>
      <article class="empty" v-else>暂无数据</article>
    </div>
    <transition name="select">
      <div class="select" v-if="foodStore.selectList.length">
        <div class="head">
          <span>已选食物({{ foodStore.selectList.length }})</span>
          <router-link to="/evaluation">去测评</router-link>
        </div>
        <div class="selectList">
          <span v-for="item in foodStore.selectList" :key="item.name">
            {{ item.name }}
            <i @click="foodStore.setSelectList(item)">&times;</i>
          </span>
        </div>
      </div>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  color: var(--c-b);
  display: flex;
  flex-direction: column;
  h3 {
    height: 50rem;
    padding-left: 15rem;
    font-size: 24rem;
    line-height: 50rem;
  }
  .search {
    padding: 15rem;
    height: 70rem;
    display: flex;
    position: relative;
    input {
      flex: 1;
      border: none;
      background: #f4f4f4;
      outline: none;
      border-radius: 35rem;
      padding-left: 15rem;
      font-size: 14rem;
      &::placeholder {
        color: var(--c-w);
      }
      &:focus {
        outline: 1rem solid tomato;
      }
    }
    i {
      position: absolute;
      transform: translateY(-55%) rotateY(180deg);
      font-size: 30rem;
      color: var(--c-w);
      top: 50%;
      right: 30rem;
    }
  }
  .con {
    flex: 1;
    overflow: hidden;
    background: #f4f4f4;
    padding-top: 1rem;
    display: flex;
    aside {
      display: flex;
      flex-direction: column;
      width: 80rem;
      padding-right: 1rem;
      overflow: hidden;
      overflow-y: auto;
      span {
        height: 50rem;
        line-height: 50rem;
        text-align: center;
      }
      .active {
        background: #fff;
        font-weight: 600;
        position: relative;
        &::after {
          content: '';
          border-left: 2rem solid tomato;
          position: absolute;
          right: 0;
          top: 50%;
          height: 20rem;
          transform: translateY(-50%);
        }
      }
    }
    article {
      background: #fff;
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      padding: 10rem;
      overflow: hidden;
      overflow-y: auto;
      .item {
        width: calc(100% / 3);
        padding: 0 10rem;
        display: flex;
        flex-direction: column;
        margin-bottom: 10rem;
        img {
          width: 65rem;
          height: 65rem;
          object-fit: cover;
          border-radius: 4rem;
          border: 2rem solid transparent;
          pointer-events: none;
        }
        span {
          height: 30rem;
          line-height: 30rem;
          color: var(--c-w);
          text-align: center;
          pointer-events: none;
        }
        &.active {
          img {
            border-color: tomato;
          }
          span {
            color: tomato;
          }
        }
      }
    }
  }
  .select {
    min-height: 100rem;
    max-height: 200rem;
    display: flex;
    flex-direction: column;
    padding-bottom: 10rem;
    .head {
      height: 30rem;
      line-height: 30rem;
      display: flex;
      justify-content: space-between;
      margin: 10rem;
      a {
        width: 80rem;
        background: red;
        color: #fff;
        text-align: center;
        border-radius: 40rem;
      }
    }
    .selectList {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      align-content: start;
      padding: 10rem 20rem 0;
      overflow: hidden;
      overflow-y: auto;
      span {
        padding: 2rem 15rem;
        margin: 0 10rem 10rem 0;
        border: 1rem solid var(--c-w);
        color: var(--c-w);
        border-radius: 3rem;
        position: relative;
        i {
          position: absolute;
          width: 12rem;
          height: 12rem;
          background: var(--c-w);
          font-size: 12rem;
          line-height: 11rem;
          text-align: center;
          color: #fff;
          font-weight: 600;
          border-radius: 50%;
          top: -3rem;
          right: -3rem;
          cursor: pointer;
        }
      }
    }
  }
  .empty {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.item-enter-active {
  transition: all 0.4s ease;
}
.item-enter-from {
  opacity: 0;
  transform: translateX(10rem);
}
.select-enter-active {
  transition: all 0.2s ease;
}
.select-enter-from {
  transform: translateY(100%);
  opacity: 0;
}
</style>
